/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-08-17 09:56:06
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Configure\Video.jsx
 * @Description  :
 */

import * as flvjs from 'mpegts.js'
import { useState, useRef, useEffect } from 'react'
import {
    Player,
    BigPlayButton,
    ControlBar,
    ReplayControl,
    ForwardControl,
    CurrentTimeDisplay,
    TimeDivider,
    PlaybackRateMenuButton,
    VolumeMenuButton,
} from 'video-react'
import { HLSSource } from './HLSSource'
import { ModalBox } from '../Modal/ModalBox'

export const Video = ({ data, date, state, playback, name }) => {
    const { deviceSerial, channelNo, tableName, tableName1, token, cameraFactory, playUrl, hd, ptz } = data
    const [Url, setUrl] = useState('')
    const BoxHeight = useRef()
    const [CameraFactory, setCameraFactory] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    useEffect(() => {
        setCameraFactory(cameraFactory)
        const url =
            window.location.hostname === 'jtgj.hljsjtgj.com'
                ? 'https://image.hljsjtgj.com'
                : 'https://yingshi.ljkjkf.com'
        if (cameraFactory === 1) {
            let playbackUrl = playback ? playback : ''
            setUrl(
                `${url}/webvideo.html?url=ezopen://open.ys7.com/${deviceSerial}/${channelNo}${hd ? '.hd' : ''}.${
                    playback ? 'rec' : 'live'
                }&token=${token}&date=${date}${playbackUrl}`,
            )
        } else if (cameraFactory === 2) {
            setUrl(
                `${url}/webLive.html?url=imou://open.lechange.com/${deviceSerial}/${channelNo}/1?streamId=1|kitToken=${token}`,
            )
        } else if (cameraFactory === 4) {
            setUrl(playUrl || '')
        } else if (cameraFactory === 5) {
            setUrl(playUrl || '')
        }
    }, [cameraFactory, channelNo, date, deviceSerial, token, playback, playUrl, hd])

    const VideoIframe = ({ url }) => {
        return (
            <iframe
                title="Video"
                src={url}
                width="100%"
                height="100%"
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
            />
        )
    }

    return (
        <div className="CommonPagesUnitVideo" ref={BoxHeight}>
            {!state && (
                <div
                    className="videoTitle"
                    onClick={() => {
                        if (ptz === 0) return
                        setOptionsCall({
                            type: 'PanTiltControl',
                            data: { ...data, title: '云台控制', width: 1450 },
                        })
                    }}
                    style={{
                        '--size': BoxHeight.current?.clientHeight / 20 + 'px',
                        cursor: ptz === 1 ? 'pointer' : 'auto',
                    }}
                >
                    {name === 1 ? tableName1 : tableName} {ptz === 1 ? '(可控)' : ''}
                </div>
            )}

            {CameraFactory === 4 ? (
                <DaHuaCameraPlayback data={Url} />
            ) : (
                <VideoIframe
                    url={`${Url}${
                        cameraFactory === 1
                            ? `&width=${BoxHeight.current?.clientWidth}&height=${BoxHeight.current?.clientHeight}`
                            : ''
                    }`}
                />
            )}
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const ClickVideo = ({ url, date }) => {
    const [Url, setUrl] = useState('')
    const BoxHeight = useRef()
    useEffect(() => setUrl(`${url}&date=${date}`), [date, url])
    const VideoIframe = ({ url }) => {
        return (
            <iframe
                title="Video"
                src={url}
                width="100%"
                height="100%"
                scrolling="no"
                frameBorder="0"
                allowFullScreen={true}
            />
        )
    }

    return (
        <div className="CommonPagesUnitVideo" ref={BoxHeight}>
            <VideoIframe
                url={`${Url}&width=${BoxHeight.current?.clientWidth}&height=${BoxHeight.current?.clientHeight}`}
            />
        </div>
    )
}

export const DaHuaCameraPlayback = ({ data }) => {
    return (
        <div className="CommonPagesUnitVideo">
            <Player fluid={false} width={'100%'} height={'100%'} playsInline autoPlay>
                <HLSSource isVideoChild src={data} />
                <BigPlayButton position="center" />
            </Player>
        </div>
    )
}

export const FlvVideoA01 = ({ url }) => {
    const FlvBox = useRef()
    useEffect(() => {
        const initFlv = url => {
            var flvPlayer = flvjs.createPlayer({ type: 'flv', url, isLive: true })
            if (flvPlayer) {
                flvPlayer.attachMediaElement(FlvBox.current)
                flvPlayer.load()
            } else {
                initFlv(url)
            }
        }
        if (FlvBox && url) initFlv(`wss://flv.ljkjkf.com/rtsp/1/?url=${url}`)
    }, [FlvBox, url])
    return <video className="FlvVideoA01" style={{ width: '100%', height: '100%' }} ref={FlvBox} controls autoPlay />
}

export const VideoUrlA01 = ({ fileUrl, coverUrl }) => {
    return (
        <Player fluid={false} width={'100%'} height={'100%'} playsInline poster={coverUrl}>
            <source src={fileUrl} />
            <BigPlayButton position="center" />
            <ControlBar>
                <ReplayControl seconds={10} order={1.1} />
                <ForwardControl seconds={30} order={1.2} />
                <CurrentTimeDisplay order={4.1} />
                <TimeDivider order={4.2} />
                <PlaybackRateMenuButton rates={[5, 2, 1, 0.5, 0.1]} order={7.1} />
                <VolumeMenuButton disabled />
            </ControlBar>
        </Player>
    )
}
